<script setup>

</script>

<template>


  <div class="container">
    <div class="textcontent">
      <h3>
        <slot name="title"></slot>
      </h3>
      <div class="content">
        <slot name="content"></slot>
      </div>
      <ul class="list">
        <slot name="list"></slot>
      </ul>
    </div>
    <div class="picture">
      <slot name="picture"></slot>
    </div>


  </div>


</template>

<style scoped>

* {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
  flex: 0 1 1200px;
  flex-flow: row wrap;
}

.picture {
  flex: 0.8 1 auto;
  display: block;
  max-width: 50%;
}

h3 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 50px;

}

.container {
  margin: 10px 0;
  display: flex;
  flex-flow: row nowrap;
  vertical-align: stretch;
}


@media (max-width: 1000px) {
  .picture {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .textcontent {
    flex: 0 1 auto;
    display: block;
  }

  h3 {

    font-size: 1.6rem;
    font-weight: 600;
    line-height: 50px;

  }

  .container {
    display: flex;
    flex-flow: column nowrap;
    margin: 10px 0;
  }
}

</style>